<!DOCTYPE html>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Embedding Example</title>
		
		<script type="text/javascript" src="/dist/jsnes.min.js"></script>
		<script type="text/javascript" src="nes-embed.js"></script>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script>window.onload = function(){nes_load_url("nes-canvas", "lj65.nes");}</script>
	<style>
		button{
			width:10rem;
		}
		.menu{
			display: flex;
			justify-content: center;
			border: 1px solid pink;
		}
		.keyboardCenter{
			margin-top:20px;
			width: 100%;
			display: flex;
			justify-content: space-around;
			border: 1px solid blue;
		}
		.peoplePosition{
			display: flex;
			justify-content: space-around;
			width: 5rem;
		}
		.keyboardControll{
			width: 100%;
			display: flex;
			flex-flow: column;
		}
		.attack{
			width: 50%;
			display: flex;
		}
		.attack button{
			width: 50%;
			display: block;
		}
		.peoplePosition{
			width: 50%;
			display: flex;
			flex-flow: column;
		}
		.peoplePosition button{
			text-align: center;
		}
		.UpDownClass{
			display: flex;
			justify-content: center;
		}
		.LeftRightClass{
			margin-top: 20px;
			margin-bottom: 20px;
			display: flex;
			justify-content: space-around;
		}

	</style>
	</head>
	<body>
		<div style="margin: auto; width: 75%;">
			<canvas id="nes-canvas" width="256" height="240" style="width: 100%"/>
		</div>
		<div class="keyboardControll">
			<div class="menu">
				<button class="keyboard">SELECT</button>
				<button class="keyboard">START</button>
			</div>
			<div class="keyboardCenter">
				<div class="peoplePosition">
					<div class="UpDownClass">
						<button class="keyboard">UP</button>
					</div>
					<div class="LeftRightClass">
						<button class="keyboard">LEFT</button>
						<button class="keyboard">RIGHT</button>
					</div>
					<div class="UpDownClass">
						<button class="keyboard">DOWN</button>
					</div>

				</div>
				<div class="attack">
					<button class="keyboard">A</button>
					<button class="keyboard">B</button>
				</div>
			</div>
		</div>







		<p>DPad: Arrow keys<br/>Start: Return, Select: Tab<br/>A Button: A, B Button: S</p>
		<script>
			function easyKeyboard(key,type){

				var keyCode='';
				if(key=='A') keyCode=81;
				if(key=='START') keyCode=13;
				if(key=='B') keyCode=79;
				if(key=='UP') keyCode=38;
				if(key=='DOWN') keyCode=40;
				if(key=='SELECT') keyCode=9;
				if(key=='LEFT') keyCode=37;
				if(key=='RIGHT') keyCode=39;

				if(keyCode!=''){
					var event={keyCode:keyCode};
					if(type=='down'){
						keyboard(nes.buttonDown, event);
					}
					else{
						keyboard(nes.buttonUp, {keyCode:keyCode})
					}
					nes.frame();
				}





			}

			$(document).ready(function(){
				$("body").css({
					position: "fixed",
					width: "100%"
				});
				document.body.addEventListener("touchmove", bodyScroll, false);
				function bodyScroll(event) {
					event.preventDefault();
				}
				document.body.style.overflow='hidden';

				$(".attack .keyboard").each(function(){
					var height=$(this).width();
					//$(this).height(height);
					console.log("height",height);
				});
				$(".peoplePosition .keyboard").each(function(){
					var height=$(this).width();
					//$(this).height(height);
					console.log("height",height);
				});
				/*
				$(".keyboard").click(function(event){
					var key=$(this).html();
					console.log("key",key);
					event.keyCode=81;
					easyKeyboard(event);
				});
				*/

				/*
				$(".keyboard").touchstart(function(event){
					var key=$(this).html();
					console.log("key",key);
					event.keyCode=key;
					easyKeyboard(event);
				});
				*/

				$(".keyboard").on('touchstart',function(e) {
					var key=$(this).html();
					easyKeyboard(key,'down');

				});

				$(".keyboard").on('touchend',function(e) {
					var key=$(this).html();
					easyKeyboard(key,'up');
				});

			});
		</script>
	</body>
</html>
